<template>
  <div class="ui-sort">

    <div class="ui-sort-list">
      <span v-for="item in list" :key="item.id" :class="[{'active': selected === item.id}]" @click="onChangeSort(item.id)">
        {{item.category_name}}
      </span>
      <a @click="showModal = true">管理分类</a>
    </div>

    <Modal v-model="showModal" draggable :mask-closable="false" @on-visible-change="onVisibleChange" title="管理分类">
      <div>
        <Button type="primary" size="large" @click="onAddSort">添加分类</Button>
      </div>
      <div class="sort-add-list">
        <div class="sort-add-item" v-for="(item, i) in editList" :key="i">
          <div class="sort-add-item--left">
            <div v-if="!item.edit">{{ item.category_name }}</div>
            <div class="sort-input" v-else>
              <Input v-model="item.category_name" placeholder style="width: 200px" />
              <Icon type="ios-checkmark" @click="onAddSortCheck(i)" />
              <Icon type="ios-close" @click="onCancelEidt(i)" />
            </div>
          </div>
          <div class="sort-add-item--right" v-if="!item.finished">
            <Icon type="md-arrow-up" @click="onCategorySort(item.id, 1)" />
            <Icon type="md-arrow-down" @click="onCategorySort(item.id, 2)" />
            <Icon type="md-create" @click="onEditSort(i)" />
            <Icon type="md-trash" @click="onDelSort(item.id)" />
          </div>
        </div>
      </div>
      <div slot="footer">
        <Button @click="showModal = false">关闭</Button>
      </div>
    </Modal>

  </div>
</template>

<script>
import { getList, store, update, destroy, categorySort } from '@/api/resource/category'

const createRandomId = () => {
  return (
    Math.random() * 10000000 +
    '0' +
    new Date().getTime() +
    '0' +
    Math.random()
      .toString()
      .substr(2, 5)
  )
}
export default {
  name: 'ResuorceCategory',
  props: {
    sort: {
      type: Object,
      default () {
        return {
          type: 1,
          name: '图片'
        }
      }
    },
    active: {
      type: Number,
      default: 0
    }
  },
  watch: {
    list (newVal) {
      // this.editList = newVal.filter(item => Number(item.id) > 0)
    },
    active (newVal) {
      this.selected = newVal
      this.onChangeSort(newVal)
    }
  },
  data () {
    return {
      selected: 0,
      editList: [],
      list: [],
      showModal: false,
    }
  },
  computed: {},
  methods: {
    onVisibleChange () {
      this.editList = this.list.filter(item => Number(item.id) > 0)
    },
    onChangeSort (id) {
      this.selected = id
      this.$emit('on-change', id)
    },
    onAddSort () {
      this.editList.unshift({
        category_name: '',
        edit: true,
        id: createRandomId()
      })
    },
    onAddSortCheck (index) {
      const { category_name, id } = this.editList[index]
      if (category_name) {
        this.$set(this.editList, index, {
          ...this.editList[index],
          edit: false
        })
        const i = this.list.findIndex(item => Number(item.id) === Number(id))
        if (i > -1) {
          this.$set(this.list, i, {
            ...this.list[i],
            category_name
          })
          update(id, {
            category_name
          }).then(() => {
            this.getList()
          })
          return
        }
        this.list.push({
          id,
          category_name
        })
        store({
          category_type: this.sort.type,
          category_name
        }).then(() => {
          this.getList()
        })
      } else {
        this.$Message['error']({
          background: true,
          content: '请填写分类名称'
        })
      }
    },
    onCancelEidt (index) {
      const { id } = this.editList[index]
      const i = this.list.findIndex(item => Number(item.id) === Number(id))
      if (i > -1) {
        this.$set(this.editList, index, {
          id,
          category_name: this.list[i].category_name
        })
        return
      }
      this.editList = this.editList.filter(
        item => Number(item.id) !== Number(id)
      )
    },
    onEditSort (index) {
      this.$set(this.editList, index, {
        ...this.editList[index],
        edit: true
      })
    },
    onDelSort (id) {
      const hasItem = this.list.findIndex(
        item => Number(item.id) === Number(id)
      )
      if (hasItem > -1) {
        this.list = this.list.filter(item => Number(item.id) !== Number(id))
        if (this.selected === Number(id)) {
          this.selected = 0
        }
      }
      this.editList = this.editList.filter(
        item => Number(item.id) !== Number(id)
      )
      destroy(id).then(() => {
        this.getList()
      })
    },
    getList () {
      getList({
        category_type: this.sort.type
      }).then(res => {
        this.list = res.data.map(item => ({
          ...item,
          id: Number(item.id)
        }))
        this.editList = this.list.filter(item => Number(item.id) > 0)
        this.$emit('on-sorts', this.editList)
      })
    },

    // 分类排序
    onCategorySort (id, type) {
      categorySort({ id: id, category_type: 1, operation_type: type }).then(async res => {
        if (res.status === 200) {
          this.getList()
        } else {
          this.$Notice.error({ title: res.msg })
        }
        this.loading = false
      }).catch(res => {
        this.loading = false
        this.$Notice.error({ title: res.msg })
      })
    },

  },
  mounted () {
    this.selected = this.active
    this.getList()
  },

}
</script>

<style lang="scss" scoped>
.ui-sort-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: -8px;
  > span {
    margin-top: 8px;
    margin-right: 10px;
    padding: 0px 20px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 100px;
    cursor: pointer;
    font-size: 14px;
    color: rgb(102, 102, 102);
    background-color: rgb(245, 245, 245);
    &.active {
      background-color: rgb(102, 170, 255);
      color: #fff;
    }
  }
  > a {
    color: rgb(102, 102, 102);
    cursor: pointer;
    margin-top: 10px;
    margin-left: 10px;
    line-height: 32px;
  }
}
.sort-add-list {
  padding-top: 12px;
  max-height: 350px;
  overflow-y: auto;
}
.sort-add-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgb(245, 245, 245);
  color: rgb(51, 51, 51);
  height: 58px;
  padding: 0px 10px 0px 20px;
  & + .sort-add-item {
    margin-top: 10px;
  }
}
.sort-add-item--left {
  display: flex;
  align-items: center;
  .ivu-icon {
    font-size: 30px;
    cursor: pointer;
  }
  .sort-input {
    display: flex;
    align-items: center;
  }
}
.sort-add-item--right {
  .ivu-icon {
    font-size: 20px;
    cursor: pointer;
    & + .ivu-icon {
      margin-left: 6px;
    }
  }
}
</style>
